<template>
  <view class="settings">
    <uni-list>
      <!-- 修改密码 -->
      <uni-list-item title="修改密码" 
                     @click="showChangePassword"
                     showArrow/>
      <!-- 其他设置项可以继续添加 -->
    </uni-list>

    <!-- 修改密码弹窗 -->
    <uni-popup ref="passwordPopup" type="dialog">
      <view class="password-popup">
        <view class="popup-title">修改密码</view>
        <view class="form-content">
          <uni-forms ref="passwordForm" :modelValue="passwordForm" :rules="rules">
            <uni-forms-item label="原密码" required>
              <uni-easyinput
                v-model="passwordForm.old_password"
                type="password"
                placeholder="请输入原密码"
              />
            </uni-forms-item>
            <uni-forms-item label="新密码" required>
              <uni-easyinput
                v-model="passwordForm.new_password"
                type="password"
                placeholder="请输入新密码"
              />
            </uni-forms-item>
            <uni-forms-item label="确认密码" required>
              <uni-easyinput
                v-model="passwordForm.confirm_password"
                type="password"
                placeholder="请确认新密码"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
        <view class="popup-buttons">
          <button @click="$refs.passwordPopup.close()">取消</button>
          <button type="primary" @click="handleChangePassword">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  data() {
    return {
      passwordForm: {
        old_password: '',
        new_password: '',
        confirm_password: ''
      },
      rules: {
        old_password: {
          rules: [{
            required: true,
            errorMessage: '请输入原密码'
          }]
        },
        new_password: {
          rules: [{
            required: true,
            errorMessage: '请输入新密码'
          }]
        },
        confirm_password: {
          rules: [{
            required: true,
            errorMessage: '请确认新密码'
          }]
        }
      }
    }
  },
  
  methods: {
    // 显示修改密码弹窗
    showChangePassword() {
      this.passwordForm = {
        old_password: '',
        new_password: '',
        confirm_password: ''
      }
      this.$refs.passwordPopup.open()
    },
    
    // 修改密码
    async handleChangePassword() {
      try {
        await this.$refs.passwordForm.validate()
      } catch(e) {
        return
      }
      
      if(this.passwordForm.new_password !== this.passwordForm.confirm_password) {
        uni.showToast({
          title: '两次密码不一致',
          icon: 'none'
        })
        return
      }
      
      try {
        const res = await request({
          url: '/user/password',
          method: 'PUT',
          data: {
            old_password: this.passwordForm.old_password,
            new_password: this.passwordForm.new_password
          }
        })
        
        if(res.statusCode === 200) {
          uni.showToast({
            title: '密码修改成功'
          })
          this.$refs.passwordPopup.close()
          
          // 修改密码成功后退出登录
          setTimeout(() => {
            uni.removeStorageSync('token')
            uni.removeStorageSync('userId')
            uni.removeStorageSync('userInfo')
            uni.reLaunch({
              url: '/pages/auth/login'
            })
          }, 1500)
        }
      } catch(e) {
        uni.showToast({
          title: '密码修改失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.settings {
  .password-popup {
    background: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
    }
    
    .form-content {
      max-height: 60vh;
      overflow-y: auto;
    }
    
    .popup-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      
      button {
        width: 45%;
      }
    }
  }
}
</style> 